<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-select v-model="formInline.admin" placeholder="权限">
          <el-option label="所有权限" value="2"></el-option>
          <el-option label="管理员" value="1"></el-option>
          <el-option label="用户" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.registrationDate
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.username }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="权限" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span style="margin-left: 10px">{{
            scope.row.admin == 1 ? "管理员" : "普通用户"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="头像" width="180">
        <template slot-scope="scope">
          <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.avatar"
          :fit="fit"
        ></el-image>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.userId)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.userId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[1, 5, 10, 15, 20]"
        :page-size="limit"
        layout="sizes, prev, pager, next"
        :total="mytotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import mytable from "@/api/table";

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          username: "王小虎",
          admin: "1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          username: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          username: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          username: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      formInline: {
        username: "",
        admin: "",
      },
      mytotal: 50,
      limit: 1,
      currentPage2: 1,
    };
  },
  created() {
    console.log("created===========");
    this.getListByPage(1, this.limit);
    // this.gettableData()
  },
  methods: {
    // getList
    gettableData() {
      mytable.getList().then((res) => {
        console.log("==========" + res);
        this.tableData = res.data;
      });
    },

    getListByPage(current, limit) {
      // 页码  条数
      mytable.getListByPage(current, limit).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
        this.mytotal = res.data.total;
        console.log(this.mytotal);
      });
    },

    onSubmit() {
      mytable.getListBytt(this.formInline).then((res) => {
        this.tableData = res.data;
      });
    },
    handleDelete(id) {
      mytable.handleDelete(id).then((res) => {
        alert("删除成功");
        //成功后重新刷新页面
        this.gettableData();
      });
    },

    // 跳转
    handleEdit(id) {
      this.$router.push("/example/tree/" + id);
    },

    // 分页查询
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getListByPage(1, val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage2 = val;
      this.getListByPage(val, this.limit);
    },
  },
};
</script>

<style scoped>
</style>
